<template>
  <view class="container">
    <!-- 自定义导航栏 -->
    <view
      style="display: flex; align-items: center; width: 100%; box-sizing: border-box; position: fixed; top: 0; left: 0; padding-left: 30rpx; background-color: #fff; z-index: 99"
      :style="{ height: navheight + 'px', 'padding-top': hometop + 'px' }"
    >
      <view @click="$refs.refcity.open()">
        <image src="../../static/loginimg/position.png" style="width: 30rpx; height: 30rpx; vertical-align: middle" mode=""></image>
        <text>{{ currentcity }}</text>
      </view>
      <view style="font-weight: bold; font-size: 36rpx; color: #151515; margin-left: 170rpx">趣玩搭</view>
      <view></view>
    </view>
    <!-- 站位盒子 -->
    <view :style="{ height: navheight + 'px', width: '100%' }"></view>
    <!-- /搜做框 -->
    <view class="search" @click="gosearch">
      <image src="../../static/messageimg/d5.png" style="width: 28rpx; height: 28rpx; padding-right: 12rpx" mode=""></image>
      <text style="font-weight: 400; font-size: 24rpx; color: #9e9b9d">请搜索您想要的内容</text>
    </view>
    <!-- 轮播图 -->
    <swiper class="swiper" circular :autoplay="true" :interval="1500" :duration="2000" style="width: 690rpx; height: 280rpx">
      <swiper-item style="width: 100%; height: 100%" @click="godetail(item)" v-for="item in swiperlist" :key="item.id">
        <image :src="img_url + item.image" style="width: 100%; height: 100%" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 分类 -->
    <view style="display: flex; flex-wrap: wrap; margin-bottom: 48rpx; width: 100%; margin-top: 30rpx">
      <!-- 每一项 -->
      <view v-for="(item, index) in grouptype" @click="choosetype(item)" :key="item.id" style="width: 25%; height: 180rpx">
        <image :src="img_url + item.image" style="width: 100%; height: 96rpx" mode="aspectFill"></image>
        <!-- <text style="position: absolute; top: 12rpx; left: 12rpx">{{ item.category_name }}</text> -->
        <view style="text-align: center">{{ item.category_name }}</view>
        <!--  <image src="../../static/indeximg/indexmore.png" style="width: 24rpx; height: 24rpx; position: absolute; bottom: 8rpx; left: 12rpx" mode=""></image> -->
      </view>
    </view>
    <!-- 群列表 -->
    <view class="item" :style="{ background: colorlist[i.colorindex] }" v-for="(i, k) in grouplist" :key="k" @click="jia(i)">
      <image :src="img_url + i.group_avatar" style="width: 112rpx; height: 112rpx; border-radius: 50%" mode="aspectFill"></image>
      <view style="width: 496rpx; padding: 0 24rpx; box-sizing: border-box">
        <view style="font-weight: bold; font-size: 32rpx; color: #151515">{{ i.group_name }}</view>
        <view style="font-weight: 400; font-size: 24rpx; color: #666666; width: 496rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">{{ i.bulletin }}</view>
      </view>
      <uni-icons type="right" size="25" color="#000"></uni-icons>
    </view>
    <!--站位盒子 -->
    <view style="height: 156rpx"></view>
    <!-- 弹框 -->
    <uni-popup ref="popup" type="center">
      <view class="box">
        <view style="position: relative; top: 0; left: 0">
          <image src="../../static/indeximg/pupopbgc.png" style="width: 580rpx; height: 232rpx" mode=""></image>
          <viwe style="font-weight: 400; font-size: 32rpx; color: #151515; position: absolute; top: 28rpx; left: 194rpx">申请进入群组</viwe>
          <view style="display: flex; align-items: center; position: absolute; top: 92rpx; left: 80rpx">
            <image :src="img_url + groupobj.group_avatar" style="width: 112rpx; height: 112rpx; border-radius: 50%" mode="aspectFill"></image>
            <view style="font-weight: bold; font-size: 36rpx; color: #151515; padding-left: 24rpx; width: 320rpx; text-overflow: ellipsis; overflow: hidden; white-space: nowrap">
              {{ groupobj.group_name }}
            </view>
          </view>
        </view>
        <view style="display: flex; align-items: center; justify-content: space-evenly">
          <view
            @click="$refs.popup.close()"
            style="
              width: 192rpx;
              height: 68rpx;
              background: #f8f8f8;
              border-radius: 34rpx 34rpx 34rpx 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #666666;
              text-align: center;
              line-height: 68rpx;
            "
          >
            取消
          </view>
          <view
            style="
              width: 192rpx;
              height: 68rpx;
              background: #37c1ff;
              border-radius: 34rpx 34rpx 34rpx 34rpx;
              font-weight: 400;
              font-size: 24rpx;
              color: #ffffff;
              text-align: center;
              line-height: 68rpx;
            "
            @tap="applyGroup"
          >
            发送申请
          </view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="refcity" type="bottom">
      <view class="box2">
        <veiw class="header">
          <view style="color: #afa6ab" @click="$refs.refcity.close()">取消</view>
          <view style="font-size: 30rpx; color: #1d202c; font-weight: 800">选择你居住的城市</view>
          <view style="color: #26a089" @click="savedate">确定</view>
        </veiw>
        <!-- 选择器 -->
        <picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
          <picker-view-column>
            <view class="item2" v-for="(item, index) in province" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column>
            <view class="item2" v-for="(item, index) in city[0].children" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>

    <!-- d底部组件 -->
    <TabBar @choosetab="choosetab" :tabbarindex="tabbarindex"></TabBar>
    <push v-if="showpush" @closeshowpush="closepush" @gopush="gopush"></push>
  </view>
</template>

<script>
import push from '@/components/pushact.vue';
import TabBar from '@/components/tabbar.vue';
export default {
  components: {
    TabBar,
    push
  },
  data() {
    return {
      indicatorStyle: `height: 50px;`,
      grouptype: [],
      colorlist: [
        'linear-gradient( 140deg, #FFE9F1 0%, #FFEEFD 100%)',
        'linear-gradient( 140deg, #F2F7FF 0%, #F3E9FF 100%)',
        'linear-gradient( 140deg, #EEFFF6 0%, #D9F3FF 100%)',
        'linear-gradient( 140deg, #FFEFF2 0%, #FFF5DC 100%)',
        'linear-gradient( 140deg, #FEF2EA 0%, #FAFFE6 100%)'
      ],
      provinceidnex: 0,
      province: [],
      userprovince: '', // 用户的城市
      value: [0, 1],
      cityindex: 0,
      swiperlist: [],
      currentcity: '',
      tabbarindex: 1,
      hometop: '',
      navheight: '',
      showpush: false, // 显示发布
      search: '',
      city_id: '',
      grouplist: [],
      img_url: this.img_url,
      groupobj: {}
    };
  },
  onReachBottom() {
    console.log('触底了');
  },
  onLoad() {
    const app = getApp();
    // this.getcitylist();
    this.hometop = app.globalData.capsule.top; // 胶囊到顶部的距离
    this.navheight = (app.globalData.capsule.top - app.globalData.system.statusBarHeight) * 2 + app.globalData.capsule.height + app.globalData.system.statusBarHeight; // 头部盒子的高度
  },
  onShow() {
    // 群分类
    this.getgrouptype();
    // 轮播图
    this.getswiper();
    // 个人资料
    this.getuserinfo();
    this.getcitylist();
  },
  computed: {
    city() {
      return this.province.filter((item) => {
        return item.name == this.province[this.provinceidnex].name;
      });
    }
  },
  methods: {
    jia(e) {
      // console.log(e);
      // return;
      if (e.is_join) {
        uni.navigateTo({
          url: '/message/groupmsg/groupmsg?id=' + e.id
        });
      } else {
        this.$refs.popup.open();
      }

      this.groupobj = e;
    },
    // 保存城市
    async savedate() {
      this.currentcity = this.province[this.provinceidnex].children[this.cityindex].name;
      uni.setStorageSync('currentcity', this.currentcity);
      this.city_id = this.province[this.provinceidnex].children[this.cityindex].id;
      this.http('/group/getGroupList', {
        city_id: this.city_id,
        search: this.search
      }).then((res) => {
        this.grouplist = res.data;
        this.grouplist.forEach((item, index) => {
          const colorIndex = index % this.colorlist.length;
          item.colorindex = colorIndex;
        });
      });
      uni.setStorageSync('cityid', this.city_id);
      this.$refs.refcity.close();
    },
    // 获取城市列表
    async getcitylist() {
      const res = await this.http('/group/getCityList');
      this.province = res.data;
      // console.log('城市列表', this.province);
      let currentprovincearr = [];
      currentprovincearr = res.data.filter((item) => {
        return item.name == this.userprovince;
      });
      console.log('currentprovincearr-------', currentprovincearr);
      currentprovincearr[0].children.forEach((item) => {
        if (item.name == this.currentcity) {
          this.city_id = item.id;
        }
      });
      console.log('城市的id', this.city_id);
      // 群列表
      this.gethome();
      uni.setStorageSync('cityid', this.city_id);
    },
    // 切换
    bindChange(e) {
      // 省份的index
      // console.log(e.detail.value[0]);
      this.provinceidnex = e.detail.value[0];
      this.cityindex = e.detail.value[1];
    },
    // 获取个人资料
    async getuserinfo() {
      const res = await this.http('/user/infor');
      // console.log('个人资料', res);
      if (uni.getStorageSync('currentcity')) {
        this.currentcity = uni.getStorageSync('currentcity');
      } else {
        this.currentcity = res.data.citys;
      }
      this.userprovince = res.data.province;
    },
    // 跳转到搜索
    gosearch() {
      uni.navigateTo({
        url: '/index/search/search'
      });
    },
    // 获取首页轮播图
    async getswiper() {
      const res = await this.http('/index/banner');
      // console.log(res);
      this.swiperlist = res.data;
    },
    // 获取群分类
    async getgrouptype() {
      const res = await this.http('/group/getGroupCategoryList');
      console.log('获取群分类', res);
      this.grouptype = res.data;
    },
    // 获取群列表
    applyGroup() {
      this.http('/group/applyGroup', {
        group_id: this.groupobj.id
      }).then((res) => {
        this.$refs.popup.close();
        uni.showToast({
          title: res.msg,
          icon: 'none'
        });
      });
    },
    gethome() {
      this.http('/group/getGroupList', {
        city_id: this.city_id,
        search: this.search
      }).then((res) => {
        this.grouplist = res.data;
        this.grouplist.forEach((item, index) => {
          const colorIndex = index % this.colorlist.length;
          item.colorindex = colorIndex;
        });
        console.log('群列表-----', this.grouplist);
      });
    },
    closepush(status) {
      this.showpush = status;
    },
    // 切换tab
    choosetab(index) {
      console.log(index);
      if (index != 5) {
        this.tabbarindex = index;
      }
      if (index == 1) {
        uni.redirectTo({
          url: '/pages/index/index'
        });
      }
      if (index == 2) {
        uni.redirectTo({
          url: '/dynamic/index/index'
        });
      }
      if (index == 3) {
        uni.redirectTo({
          url: '/message/index/index'
        });
      }
      if (index == 4) {
        uni.redirectTo({
          url: '/my/index/index'
        });
      }
      if (index == 5) {
        this.showpush = true;
      }
    },
    //发布动态
    gopush(index) {
      if (index == 1) {
        // 发布活动
        uni.navigateTo({
          url: '/pages/pushactive/pushactive'
        });
      }
      if (index == 2) {
        // 发布动态
        uni.navigateTo({
          url: '/pages/pushdynamic/pushdynamic'
        });
      }
    },
    // 跳转分类
    choosetype(item) {
      uni.navigateTo({
        url: '/index/search/search?title=' + JSON.stringify(item)
      });
    },
    //轮播详情
    godetail(item) {
      uni.navigateTo({
        url: '/index/swiperdetail/swiperdetail?data=' + item.content
      });
    }
  },
  onHide() {
    this.showpush = false;
  },
  onUnload() {
    this.showpush = false;
  }
};
</script>
<style lang="scss" scoped>
.picker-view {
  width: 680rpx;
  height: 600rpx;
  margin-top: 20rpx;
  picker-view-column {
    z-index: 99 !important;
  }
}
.container {
  padding: 0 20px;
  font-size: 14px;
  line-height: 24px;

  .box2 {
    box-sizing: border-box;
    width: 750rpx;
    height: 800rpx;
    border-radius: 18rpx 18rpx 0rpx 0rpx;
    padding: 30rpx;
    background-color: #fff;

    .header {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }

    .item2 {
      line-height: 100rpx;
      text-align: center;
    }
  }

  .search {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 6rpx 0 16rpx 0;
    width: 690rpx;
    height: 68rpx;
    background: #f1edf0;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    padding-left: 24rpx;
  }

  .box {
    box-sizing: border-box;
    width: 580rpx;
    height: 340rpx;
    border-radius: 30rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
  }

  .item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 690rpx;
    height: 160rpx;
    padding: 24rpx 16rpx;
    background: linear-gradient(140deg, #ffe9f1 0%, #ffeefd 100%);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    margin-bottom: 16rpx;
  }
}

.uni-searchbar__box {
  justify-content: flex-start !important;
}
</style>
